<template>
    <div class="basic_info">
        <div class="reset">
            <div class="resetInfo">
                <div class="title">账套购买</div>
                <div class="content">
                    <div class="content-title">产品模块：</div>
                    <div class="content-items">
                        <div v-for="(item, index) in cloudList" :key="index" @click="selectVersion(item, index)">
                            <div :class="current == index ? 'item-div-1' : 'item-div-2'">
                                <div class="item-text-1" :style="{ color: current == index ? '#1B94FB' : '#999999' }">
                                    象过河云进销存
                                </div>
                                <div class="item-text-2" :style="{ color: current == index ? '#1B94FB' : '#999999' }">
                                    {{ item.name }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="user-number">
                    <div style="display: flex; align-items: center;">
                        <div class="user-title">备份数量：</div>
                        <!-- <button class="reduce-add" @click="clickReduce"> - </button> -->
                        <input class="number-input" v-model="cloudModel.number" disabled />
                        <!-- <button class="reduce-add" style="margin-left: -1px;" @click="clickAdd"> + </button> -->
                    </div>
                </div>
                <div class="pay-price">
                    <div class="user-title">支付金额：</div>
                    <div class="after-price">￥{{ (cloudModel.money || 0).toFixed(2) }}</div>
                    <div class="user-title" style="margin-left: 30px; min-width: 40px;">原价：</div>
                    <div class="before-price">￥{{ (cloudModel.originalPrice || 0).toFixed(2) }}</div>
                </div>
                <div class="resetBtn">
                    <el-button size="mini" class="pay-btn" @click="gotoPay">立即支付</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
import PopupReset from '../../components/popupReset'
import PopupResetConfirm from '../../components/popupResetConfirm'
// import oneDiaLogStyle from '../../components/oneDiaLogStyle'
import Share from '../../components/Share'
import { postAction, getAction } from '@/api/manage'
import { USER_INFO, ACCOUNT_BOOK } from '@/store/mutation-types'
import Vue from 'vue'
export default {
    name: 'systemReset',
    components: {
        PopupReset,
        PopupResetConfirm,
        // oneDiaLogStyle,
        Share,
    },
    data() {
        return {
            current: 0, // 版本列表下标
            priceIndex: 0, // 价格列表下标
            cloudModel: {}, // 价格model
            cloudList: [], // 版本列表
            url: {
                queryList: '/XghAuthorizationCenter/xghAuthorizationCenterCloud/queryList',
                addOrder: '/XghAuthorizationCenter/xghAuthorizationCenterOrders/add',
            }
        }
    },
    created() {
        this.getVersionList()
    },
    methods: {
        // 版本价格列表
        getVersionList() {
            getAction(this.url.queryList).then(res => {
                console.log(res, '版本列表')
                if (res.code == 200) {
                    this.cloudList = res.result || []
                    if (this.cloudList.length > 0) {
                        this.cloudModel = this.cloudList[this.current]
                    }
                }
            })
        },
        // 版本选择
        selectVersion(item, index) {
            this.current = index
            this.cloudModel = this.cloudList[this.current]
        },
        // 减少
        clickReduce() {
            if (this.priceIndex <= 0) {
                this.$elMessage.warning('已经是最低年限了！')
                return
            }
            this.priceIndex--
            this.cloudModel = this.cloudList[this.priceIndex]
        },
        // 增加
        clickAdd() {
            if (this.priceIndex >= this.cloudList.length - 1) {
                this.$elMessage.warning('想要更多年限，请联系客服！')
                return
            }
            this.priceIndex++
            this.cloudModel = this.cloudList[this.priceIndex]
        },
        // 立即支付
        gotoPay() {
            let accountId = ''
            if (this.$route.query.id) {
                accountId = this.$route.query.id
            } else {
                let accountBook = Vue.ls.get(ACCOUNT_BOOK)
                accountId = accountBook && accountBook.id
            }
            let params = {
                goodsId: this.cloudList[this.current].id,
                goodsName: this.cloudList[this.current].name,
                goodsNumber: this.cloudModel.number,
                goodsType: '3',
                xghAccountBookId: accountId,
                orderMoney: this.cloudModel.money,
                // orderMoney: 0.01,
            }
            postAction(this.url.addOrder, params).then(res => {
                if (res.code == 200) {
                    this.$router.push({
                        path: '/setting/buy/confirmPay',
                        query: {
                            id: res.result.id
                        }
                    })
                } else {
                    this.$elMessage.error(res.message)
                }
            })
        },
    },
}
</script>
  
<style lang="scss" scoped>
.basic_info {
    width: 100%;
    height: calc(100vh - 1.875117rem);
    background: #f0f2f5;
    box-sizing: border-box;
    padding: 0 0.168761rem 0.168761rem;
    display: flex;
    flex-direction: column;
}

.reset {
    background-color: #fff;
    height: 100%;

    .resetInfo {
        padding: 0.375023rem;

        .title {
            border-bottom: 1px solid #eee;
            font-size: 16px;
            color: #1B94FB;
            padding-bottom: 13px;
        }

        .content {
            border-bottom: 1px solid #eee;
            padding-bottom: 25px;
            display: flex;
        }

        .content-title {
            margin-top: 31px;
            min-width: 72px;
            height: 18px;
            line-height: 18px;
            font-size: 13px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
        }

        .content-items {
            display: flex;
            flex-wrap: wrap;
        }

        .item-div-1 {
            margin-top: 20px;
            margin-right: 20px;
            width: 171px;
            height: 103px;
            background-image: url('./v_selected.png');
            background-repeat: no-repeat;
            background-size: 171px 103px;
        }

        .item-div-2 {
            margin-top: 20px;
            margin-right: 20px;
            width: 171px;
            height: 103px;
            background-image: url('./v_unselect.png');
            background-repeat: no-repeat;
            background-size: 171px 103px;
        }

        .item-text-1 {
            padding: 26px 26px 0 26px;
            font-size: 16px;
            font-family: PingFang SC-Semibold, PingFang SC;
            font-weight: 600;
            color: #999999;
            line-height: 30px;
        }

        .item-text-2 {
            padding: 0 26px;
            font-size: 16px;
            font-family: PingFang SC-Semibold, PingFang SC;
            font-weight: 600;
            color: #999999;
            line-height: 30px;
        }

        .user-number {
            padding: 35px 0;
            border-bottom: 1px solid #eee;
        }

        .user-title {
            min-width: 72px;
            height: 18px;
            line-height: 18px;
            font-size: 13px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
        }

        .reduce-add {
            width: 34px;
            height: 34px;
            border: 1px solid #CBCED3;
            font-size: 20px;
            color: #CBCED3;
            background-color: #FFFFFF;
        }

        .number-input {
            margin-left: -1px;
            width: 69px;
            height: 34px;
            background: #FFFFFF;
            border: 1px solid #CBCED3;
            text-align: center;
            font-size: 16px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
        }

        .number-input:focus {
            outline: none;
        }

        .pay-price {
            display: flex;
            align-items: center;
            padding: 25px 0;
            border-bottom: 1px solid #eee;
        }

        .after-price {
            height: 32px;
            font-size: 25px;
            font-family: Helvetica Neue-Bold, Helvetica Neue;
            font-weight: bold;
            color: #FD6C21;
            line-height: 32px;
        }

        .before-price {
            font-size: 20px;
            font-family: HelveticaNeue-, HelveticaNeue;
            font-weight: normal;
            color: #666666;
            line-height: 32px;
            text-decoration: line-through;
        }

    }
}

.resetBtn {
    margin-top: 28px;
}

.pay-btn {
    width: 103px;
    height: 35px;
    background: #1993FB;
    font-size: 13px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
}
</style>